﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - How to Highlight Rows</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){
				$scope.gridName = "gridSample";
				$scope.gridLines = 'vertical';

				$scope.columns = [
					{ 
						id: 9,
					 	editorType: 'checkbox',
					 	editorSettings: { 
					 		threeState: false, 
					 		style: {
					 			general: 'checkbox',
					 			box: {
						 			checked: 'checkbox-checked',
						 			unchecked: 'checkbox-unchecked'
						 		}
					 		}
					 	},
					 	contentAlignment: 'center',
					 	width: 30,
					 	fixedWidth: true
					},
					{ id: 2, headerText: "Continents/Countries", width: 250 },
					{ id: 3, headerText: "Population", headerAlignment: "center", contentAlignment: "right", width: 125 },
					{ id: 4, headerText: "Date", headerAlignment: "center", contentAlignment: "center", width: 120 },
					{ id: 6, headerText: "Land in km2", headerAlignment: "center", contentAlignment: "right", width: 90 },
					{ id: 7, headerText: "Capital", headerAlignment: "center", width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Africa",
						expanded: false,
						cells: [{ cid: 9 }, { cid: 2, text: "Africa" }],
						rows: [
							{ id: 11, pid: 1, text: "Egypt", cells: [{ cid: 9 }, { cid: 2, text: "Egypt" }, { cid: 3, text: "88,311,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "995,450" }, { cid: 7, text: "Cairo" }] },
							{ id: 12, pid: 1, text: "Nigeria", cells: [{ cid: 9 }, { cid: 2, text: "Nigeria" }, { cid: 3, text: "185,043,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "910,768" }, { cid: 7, text: "Abuja" }] },
							{ id: 13, pid: 1, text: "South Africa", cells: [{ cid: 9 }, { cid: 2, text: "South Africa" }, { cid: 3, text: "54,002,000" }, { cid: 4, text: "01 Jul 2014" }, { cid: 6, text: "1,214,470" }, { cid: 7, text: "Pretoria" }] }
						]
					},
					{ 
						id: 2,
						text: "Asia",
						cells: [{ cid: 9 }, { cid: 2, text: "Asia" }],
						rows: [
							{ id: 21, pid: 2, text: "China", cells: [{ cid: 9 }, { cid: 2, text: "China" }, { cid: 3, text: "1,369,140,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "9,326,410" }, { cid: 7, text: "Beijing" }] },
							{ id: 22, pid: 2, text: "India", cells: [{ cid: 9 }, { cid: 2, text: "India" }, { cid: 3, text: "1,269,545,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,864,021" }, { cid: 7, text: "New Delhi" }] },
							{ id: 23, pid: 2, text: "Japan", cells: [{ cid: 9 }, { cid: 2, text: "Japan" }, { cid: 3, text: "126,910,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "364,485" }, { cid: 7, text: "Tokyo" }] },
							{ id: 24, pid: 2, text: "Saudi Arabia", cells: [{ cid: 9 }, { cid: 2, text: "Saudi Arabia" }, { cid: 3, text: "31,521,418" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,149,690" }, { cid: 7, text: "Riyadh" }] },
							{ id: 25, pid: 2, text: "South Korea", cells: [{ cid: 9 }, { cid: 2, text: "South Korea" }, { cid: 3, text: "51,342,881" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "100,032" }, { cid: 7, text: "Seoul" }] }
						]
					},
					{ 
						id: 3,
						text: "Europe",
						cells: [{ cid: 9 }, { cid: 2, text: "Europe" }],
						rows: [
							{ id: 31, pid: 3, text: "France", cells: [{ cid: 9 }, { cid: 2, text: "France" }, { cid: 3, text: "66,109,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "640,427" }, { cid: 7, text: "Paris" }] },
							{ id: 32, pid: 3, text: "Germany", cells: [{ cid: 9 }, { cid: 2, text: "Germany" }, { cid: 3, text: "80,925,000" }, { cid: 4, text: "30 Jun 2014" }, { cid: 6, text: "348,672" }, { cid: 7, text: "Berlin" }] },
							{ id: 33, pid: 3, text: "Italy", cells: [{ cid: 9 }, { cid: 2, text: "Italy" }, { cid: 3, text: "60,788,845" }, { cid: 4, text: "30 Nov 2014" }, { cid: 6, text: "294,140" }, { cid: 7, text: "Rome" }] },
							{ id: 34, pid: 3, text: "Macedonia", cells: [{ cid: 9 }, { cid: 2, text: "Macedonia" }, { cid: 3, text: "2,065,769" }, { cid: 4, text: "31 Dec 2013" }, { cid: 6, text: "25,433" }, { cid: 7, text: "Skopje" }] }
						]
					},
					{ 
						id: 4,
						text: "North America",
						cells: [{ cid: 9 }, { cid: 2, text: "North America" }],
						rows: [
							{ id: 41, pid: 4, text: "Canada", cells: [{ cid: 9 }, { cid: 2, text: "Canada" }, { cid: 3, text: "35,702,707" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "9,093,507" }, { cid: 7, text: "Ottawa" }] },
							{ id: 42, pid: 4, text: "Mexico", cells: [{ cid: 9 }, { cid: 2, text: "Mexico" }, { cid: 3, text: "121,005,815" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "1,943,945" }, { cid: 7, text: "Mexico City" }] },
							{ id: 43, pid: 4, text: "USA", cells: [{ cid: 9 }, { cid: 2, text: "USA" }, { cid: 3, text: "320,651,000" }, { cid: 4, text: "07 Apr 2015" }, { cid: 6, text: "9,161,966" }, { cid: 7, text: "Washington" }] }
						]
					},
					{ 
						id: 5,
						text: "South America",
						cells: [{ cid: 9 }, { cid: 2, text: "South America" }],
						rows: [
							{ id: 51, pid: 5, text: "Argentina", cells: [{ cid: 9 }, { cid: 2, text: "Argentina" }, { cid: 3, text: "43,131,966" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,736,690" }, { cid: 7, text: "Buenos Aires" }] },
							{ id: 52, pid: 5, text: "Brazil", cells: [{ cid: 9 }, { cid: 2, text: "Brazil" }, { cid: 3, text: "204,134,000" }, { cid: 4, text: "08 Apr 2015" }, { cid: 6, text: "8,460,415" }, { cid: 7, text: "Brasília" }] }
						]
					}
				];

				$scope.ctrlStyle = {
					row: {
						general: {
							//hovered: 'row-hovered'
						}
					}
				}

				var loadTimer = $timeout(function(){
					$gridService.expandColIndex($scope.gridName, 1);

					$timeout.cancel(loadTimer);
				}, 1);

				$scope.onCellValueChanged = function(e){
					if (e.value == true || e.value == 'checked'){
						e.row.style = {
							general: {
								normal: 'row-highlight',
								hovered: 'row-highlight',
								selected: 'row-highlight'
							}
						}
					}
					else
						e.row.style = null;//'initial';


					var refreshTimer = $timeout(function(){
						$gridService.refresh($scope.gridName, e.row);

						$timeout.cancel(refreshTimer);
					}, 1);
				}

				$scope.getState = function(){
					if ($scope.rows[1].cells[0].value == true)
						$scope.rows[1].cells[0].value = false;
					else
						$scope.rows[1].cells[0].value = true;
				}
			}]);
    </script>
    <style type="text/css">
		/* TreeGrid settings */
		.row-highlight
		{
			background: #008000;
			color: white;
		}
		.checkbox
		{
			width: 14px;
			margin: auto;
		}
		.checkbox-checked
		{
			border-color: red;
			color: red;
		}
		.checkbox-unchecked
		{
			border-color: #000080;
		}

		/* Sample settings */
		.feature-content
		{
			width: 750px;
		}
		.directive
		{
			border: thin solid #cecece;
        	width: 800px;
        	height: 300px;
		}
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / How to Highlight Rows</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" show-footer="false" cellvalue-changed="onCellValueChanged(e)" control-style="ctrlStyle" allow-focus="false" selection-mode="none"></iui-treegrid>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>This sample demonstrates how to highlight rows in TreeGrid, whenever a row is checked. Selection of rows for this sample is disabled.</p>
                    <p><span class="initial-space"></span>By default all rows have their appearance set by general CSS styles. TreeGrid has an option to alter the appearance of each column, row or cell by simply overriding these CSS styles, through code. You may also notice that check box has a different appearance: blue border which when checked goes red with red check mark.</p>
                    <p><span class="initial-space"></span>You can dynamically change the overall appearance of rows by simply applying a different CSS class to a specific row, based on its current state. There are 5 different states for a row: disabled, hovered, normal, focused and selected. By default each row is in normal state. As it can be seen from code of this sample, we are are making checked rows to become highlighted by simply setting a CSS class.</p>
                    <p><span class="initial-space"></span>In similar way you can customize the appearance of other parts of TreeGrid like: expand box, individual cells, column headers or footers, etc.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
